<template>
    <div>
          <div id="app">
    <el-row :gutter="20">
       <el-col :span="4">
         <el-image
        style="width: 200px; height: 70px"
        src="https://alikesiren.oss-cn-chengdu.aliyuncs.com/uugai.com-v5872-16208709299370.png"
        fit="cover">
        </el-image>
      </el-col>
      <el-col :span="20">
        <el-menu  :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item >
            <el-input style="float:right;width:200px"
              v-model="input"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="查询车位信息"
                  >
            </el-input>
          </el-menu-item>
          <el-menu-item >
             <el-button plain>查询</el-button>
          </el-menu-item>
          <el-menu-item >
             <router-link to="/">首页</router-link>
          </el-menu-item>
         <el-menu-item index="/userIndex">
              个人中心
         </el-menu-item>
          <el-menu-item>
                <router-link to="/userapp/carbarn">停车场搜索</router-link>
          </el-menu-item>
          <el-menu-item>
                <span>天气状况: <i class="el-icon-sunrise"></i></span>
          </el-menu-item>
          <el-menu-item>
                <router-link to="/userapp/login">登录|注册</router-link>
          </el-menu-item>

        </el-menu>
      </el-col>
    </el-row> 
  </div>
    <router-view/>
    </div>
</template>


<script>

export default {
  name: 'userapp',
  components: {
  },
   data() {
      return {
        input:"",
        activeIndex: '/about',
         options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
      };
    },
     mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
}
</script>